<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 
        组件的通信
            组件与组件之间相互嵌套，避免不了会需要进行通信(父传子，子传父，同级，跨级)

        父传子props
            props关键字用于接收父传递进来的属性值,props:['msg'];
            父组件内在调用子组件，通过自定义属性名传入，<child msg='要传入的内容'></child>
     -->

     <div id="box">
        <myheader msg="父的数据"></myheader>
    </div>
   
    <script>
        Vue.component('myheader',{
            props:['msg'],
            template:"<div>接收的值是:{{msg}}</div>"
        })

        //vue实例  父组件
        var vm=new Vue({
            el:"#box",
            data:{}
        })
    </script>
</body>
</html>